<template>
    <div class="Scene3D">
        
        <div class="video-box" ref="video"></div>
        <div class="box-tool">
            <button @click="OpenDown('漫游')">漫游</button>
            <button @click="OpenDown('下雨')">下雨</button>
            <button @click="OpenDown('下雪')">下雪</button>
            <button @click="OpenDown('廊道')">廊道</button>
            <button @click="OpenDown('巡查')">巡查</button>
            <button @click="OpenDown('开闸')">开闸</button>
            <button @click="OpenDown('设备')">设备</button>
            <button @click="OpenDown('透显')">透显</button>
            <button @click="OpenDown('描边')">描边</button>
            <button @click="OpenDown('倾斜模型')">倾斜模型</button>
            <button @click="OpenDown('廊道漫游')">廊道漫游</button>
            <button @click="OpenDown('实时天气')">实时天气</button>
            <button @click="OpenDown('HOME')">HOME</button>
        </div>

    </div>
</template>
<script>
export default {
    name: "PeerStream",
    data() {
        return {
            // serverPath: "ws://192.168.10.106:19001/DHT", //三维服务器流送地址
            serverPath: import.meta.env.VITE_APP_UE_URL, //三维服务器流送地址
            backgroundImage: 'url("")', //加载时显示的背景图片

            漫游: false,
            下雨: false,
            下雪: false,
            廊道: false,
            巡查: false,
            开闸: false,
            设备: false,
            透显: false,
            描边: false,
            倾斜模型: false,
            廊道漫游: false,
            实时天气: false,
            HOME: false
        }
    },
    mounted() {
        this.initPS();//初始化三维服务

        /* 
        监听渲染事件：当场景开始渲染时触发。
        此事件标志着三维场景开始渲染场景，此后可以安全发送消息。
        */
        window.ps.addEventListener("playing", e => {
            console.log("三维场景已开始渲染");
        })

        /* 
        消息监听： 接收来自三维服务的消息并处理。
        */
        window.ps.addEventListener("message", e => {
            // console.log(e.detail);
        })
        
    },
    methods: {
        
        initPS() {
            const ps = document.createElement("video", { is: "peer-stream"});
            ps.style.width = '100%';
            ps.style.height = '100%';
            ps.style.backgroundImage = this.backgroundImage;
            ps.style.backgroundRepeat = 'no-repeat';
            ps.style.backgroundSize ='cover';
            ps.style.backgroundPosition = 'center';
            ps.id = this.serverPath;
            this.$refs.video.appendChild(ps);
        },
        sentMsgTo3D(fnName, param) {
            /* 
            向三维服务发送消息。
            */
            ps.emitMessage({ fnName: fnName, param: param })
        },
        OpenDown(str) {
            switch(str) {
                case "漫游":
                    this.漫游 = !this.漫游;
                    this.sentMsgTo3D("漫游", {type: this.漫游});
                    break;
                case "下雨":
                    this.下雨 = !this.下雨;
                    this.sentMsgTo3D("下雨", {type: this.下雨});
                    break;
                case "下雪":
                    this.下雪 = !this.下雪;
                    this.sentMsgTo3D("下雪", {type: this.下雪});
                    break;
                case "廊道":
                    this.廊道 = !this.廊道;
                    this.sentMsgTo3D("廊道", {type: this.廊道});
                    break;
                case "巡查":
                    this.巡查 = !this.巡查;
                    this.sentMsgTo3D("巡查", {type: this.巡查});
                    break;
                case "开闸":
                    this.开闸 = !this.开闸;
                    this.sentMsgTo3D("开闸", {type: this.开闸});
                    break;
                case "设备":
                    this.设备 = !this.设备;
                    this.sentMsgTo3D("设备", {type: this.设备});
                    break;
                case "透显":
                    this.透显 = !this.透显;
                    this.sentMsgTo3D("透显", {type: this.透显});
                    break;
                case "描边":
                    this.描边 = !this.描边;
                    this.sentMsgTo3D("描边", {type: this.描边});
                    break;
                case "倾斜模型":
                    this.倾斜模型 = !this.倾斜模型;
                    this.sentMsgTo3D("倾斜模型", {type: this.倾斜模型});
                    break;
                case "廊道漫游":
                    this.廊道漫游 = !this.廊道漫游;
                    this.sentMsgTo3D("廊道漫游", {type: this.廊道漫游});
                    break;
                case "实时天气":
                    this.实时天气 = !this.实时天气;
                    this.sentMsgTo3D("实时天气", {type: this.实时天气});
                    break;
                case "HOME":
                    this.HOME = !this.HOME;
                    this.sentMsgTo3D("HOME", {type: this.HOME});
                    break;
                default:
                    break;
            }

        }
    }
}

</script>
<style scoped>
.Scene3D {
    width: 100%;
    height: 100%;
}
.video-box {
    width: 100vw;
    height: 100vh;
    display: flex;
}
.box-tool{
    width: 100%;
    position: absolute;
    bottom: 30px;
    display: flex;
    justify-content: space-evenly;
}
button {
    background-color: #CCC;
    padding: 0 10px;
}
</style>